<template>
  <div class="person">
    <h2>汽车信息</h2>
    <h2>一辆{{ car.brand }}车价值:{{ car.price }}w</h2>
    <button @click="changePrice">修改汽车的价格</button>
    <br />
    <h2>游戏列表</h2>
    <ul>
      <li v-for="game of games" :key="game.id">{{ game.name }}</li>
    </ul>
    <button @click="changeFirstGame">修改第一个游戏的名字</button>
  </div>
</template>

<script setup lang="ts" name="Person">
import {  ref } from "vue";

// 数据 
let car = ref({ brand: "奔驰", price: 100 });
let games = ref([
  { id: "dshj01", name: "原神" },
  { id: "dshj01", name: "和平精英" },
  { id: "dshj01", name: "王者荣耀" },
]);
// 方法
function changePrice() {
  // ref需要.value才能实现响应式修改
  car.value.price += 10;
  console.log(car.value.price);
}
function changeFirstGame() {
  // 对象名.value.属性名 = 新值
  games.value[0].name = "绝地求生";
}
</script>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
button {
  margin: 0 5px;
}
li {
  font-size: 20px;
}
</style>
